<template>
  <div class="wrap">
    <div class="header">
      <div class="userInfos">
        <img
          :src="userInfo.avatar?userInfo.avatar:''"
          :onerror="defaultImg"
          class="avi"
          alt
          @click="setHeader"
        />

        <div class="ri">
          <h3>{{userInfo.username}}</h3>
          <p @click="setName">编辑名称</p>
          <div class="sname" @click="setAutograph">
            <p>{{userInfo.signature?userInfo.signature:'无签名'}}</p>
            <img src="../assets/right_write.png" alt />
          </div>
        </div>
      </div>
      <div class="tabs">
        <div>
          <img src="../assets/time.png" alt />
          <p>{{userInfo.end_time}}到期</p>
        </div>
        <div @click="setRenew">
          <img src="../assets/prie.png" alt />
          <p>会员续费</p>
        </div>
        <div @click="save">
          <img src="../assets/code.png" alt />
          <p>二维码</p>
        </div>
      </div>
    </div>
    <div class="center">
      <div class="item" @click="attention">
        <div>
          <img class="icon" src="../assets/guanzhu.png" alt />
          <p>关注我的</p>
        </div>
        <img src="../assets/right.png" class="right" alt />
      </div>
      <div class="item" @click="setPhone">
        <div>
          <img class="icon" src="../assets/phone.png" alt />
          <p>手机号码</p>
        </div>
        <span style="color:#999">{{phone}}</span>
        <img src="../assets/right.png" class="right" alt />
      </div>
      <div class="item" @click="setPassworld">
        <div>
          <img class="icon" src="../assets/password.png" alt />
          <p>修改密码</p>
        </div>
        <img src="../assets/right.png" class="right" alt />
      </div>
      <div class="item" @click="setOptions">
        <div>
          <img class="icon" src="../assets/set.png" alt />
          <p>设置</p>
        </div>
        <img src="../assets/right.png" class="right" alt />
      </div>
      <div class="item" @click="clear">
        <div>
          <img class="icon" src="../assets/clear.png" alt />
          <p>订单一键清理</p>
        </div>
        <img src="../assets/right.png" class="right" alt />
      </div>
      <p class="logout" @click="loginout">退出登录</p>
    </div>
    <div class="wrap2" id="can">
      <img src="../assets/bg.png" class="bg" alt srcset />
      <img :src="userInfo.qr_code" class="code" alt srcset />
      <img :src="userInfo.avatar" :onerror="defaultImg" class="header" alt />
      <img src="../assets/wxicon.png" class="wxicon" alt srcset />
      <p class="name">{{userInfo.parent_username?userInfo.parent_username:userInfo.username}}</p>
      <p class="wxts">扫码查看你在此商家的订单</p>
    </div>
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" style="    width: 75%;
    margin: 30px auto;" @click.stop>
        <img :src="base64" style="width:100%" alt srcset />
      </div>
    </van-overlay>
  </div>
</template>
<style lang="scss" scoped>
.wrap2 {
  position: absolute;
  left: -10000px;
  .bg {
    width: 375px;
    display: block;
  }
  .wxicon {
    width: 30px;
    height: 30px;
    display: block;
    position: absolute;
    bottom: 150px;
    left: 80px;
  }
  .wxts {
    position: absolute;
    bottom: 157px;
    left: 120px;
    font-size: 14px;
    font-variant: normal;
  }
  .code {
    position: absolute;
    top: 400px;
    left: 77px;
    width: 220px;
  }

  .header {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 342px;
    left: 70px;
    background: transparent;
  }

  .name {
    position: absolute;
    top: 358px;
    left: 133px;
    width: 148px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    font-variant: normal;
    text-align: left;
    font-size: 16px;
  }
}
.header {
  background: #719bef;
  overflow: hidden;
  padding-bottom: 0.8rem;
  .tabs {
    display: flex;
    justify-content: space-between;
    padding: 0 0.4rem;
    margin-top: 0.4rem;
    div {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 2.4rem;
      p {
        color: #fff;
        font-size: 0.32rem;
        text-align: center;
        font-weight: normal;
      }
      span {
        color: #fff;
        font-size: 0.28rem;
      }
      img {
        width: 0.8rem;
        height: 0.8rem;
        display: block;
        border-radius: 50%;
        margin-bottom: 0.2rem;
      }
    }
  }
  .userInfos {
    display: flex;
    align-items: center;
    margin-top: 0.4rem;
    .avi {
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      display: block;
      margin-left: 0.666667rem;
      margin-right: 1.066667rem;
      border: 2px solid #fff;
      object-fit: cover;
    }
    .ri {
      h3 {
        color: #fff;
        font-size: 0.48rem;
        text-align: left;
        margin-bottom: 6px;
      }
      p {
        color: #fff;
        text-align: left;
      }
    }
    .sname {
      display: flex;
      margin-top: 10px;
      justify-content: space-between;
      align-items: center;
      p {
        width: 4rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      img {
        width: 0.3rem;
        height: 0.3rem;
      }
    }
  }
}
.logout {
  width: 4rem;
  background: #719bef;
  border: none;
  outline: none;
  color: #fff;
  height: 1rem;
  border-radius: 6px;
  margin: 0.4rem auto 0;
  line-height: 1rem;
}
.center {
  background: #fff;
  border-radius: 0.506667rem 0.506667rem 0px 0px;
  margin-top: -0.4rem;
  padding: 0.4rem 0.613333rem 0;
  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 1.4rem;
    div {
      display: flex;
    }
    .icon {
      width: 0.5rem;
      height: 0.5rem;
      display: block;
      margin-right: 0.64rem;
    }
    p {
      color: #5b5b5b;
      font-size: 0.32rem;
    }
    .right {
      width: 0.3rem;
    }
  }
}
</style>
<script>
import html2canvas from "html2canvas";
import { Dialog, Toast } from "vant";
import { findUserInfo, deleteAll } from "@/utils/interface";
export default {
  data() {
    return {
      userInfo: {},
      phone: "",
      defaultImg: 'this.src="' + require("../assets/user3.jpg") + '"',
      name: "",
      avatar: "",
      type: 1,
      base64: "",
      show: false
    };
  },
  methods: {
    save() {
      if (!this.userInfo.qr_code) {
        return false;
      }
      let that = this;
      html2canvas(document.getElementById("can"), { useCORS: true }).then(
        function(canvas) {
          that.base64 = canvas.toDataURL("png");
          that.show = true;
        }
      );
    },
    setHeader() {
      if (this.type == 1) {
        Toast.fail("暂无权限");
      } else {
        this.$router.push("/setHeader");
      }
    },
    setName() {
      if (this.type == 1) {
        Toast.fail("暂无权限");
      } else {
        this.$router.push({
          name: "setName",
          query: { name: this.userInfo.username }
        });
      }
    },
    attention() {
      if (this.type == 1) {
        Toast.fail("暂无权限");
      } else {
        this.$router.push("/attention");
      }
    },
    setPhone() {
      if (this.type == 1) {
        Toast.fail("暂无权限");
      } else {
        this.$router.push("/setPhone");
      }
    },
    mycode() {
      this.$router.push("/myCode");
    },
    // 续费
    setRenew() {
      if (this.type == 1) {
        Toast.fail("暂无权限");
      }
      this.$router.push("/renew");
    },
    selectUser() {
      if (this.type == 1) {
        Toast.fail("暂无权限");
      } else {
        this.$router.push("/selectUser");
      }
    },
    // 签名设置
    setAutograph() {
      if (this.type == 1) {
        Toast.fail("暂无权限");
      } else {
        this.$router.push("/setAutograph");
      }
    },
    // 修改密码
    setPassworld() {
      if (this.type == 1) {
        Toast.fail("暂无权限");
      } else {
        this.$router.push("/setPassworld");
      }
    },
    // 代发设置
    setOptions() {
      if (this.type == 1) {
        Toast.fail("暂无权限");
      } else {
        this.$router.push("/setOptions");
      }
    },
    // 一键清理
    clear() {
      if (this.type == 1) {
        Toast.fail("暂无权限");
      } else {
        Dialog.confirm({
          title: "确认清理所有历史录入订单？",
          message: `此操作将清除所有的历史订单（不含客户提交的代发订单）
删除后您的客户和供应商也将无法查看被删除的订单
此操作不会将客户提交的代发订单删除，客户可正常查看代发订单中的信息
请谨慎操作！！！`,
          messageAlign: "left"
        }).then(() => {
          deleteAll().then(res => {
            if (res.data.code == 200) {
              Toast.success("清理成功");
            }
          });
        });
      }
    },
    // 个人信息
    findUserInfo() {
      findUserInfo().then(res => {
        this.userInfo = res.data.data;
        this.phone =
          this.userInfo.account.substr(0, 3) +
          "****" +
          this.userInfo.account.substr(7);
      });
    },
    loginout() {
      Dialog.confirm({
        title: "提示",
        message: "是否退出登陆"
      }).then(() => {
        localStorage.removeItem("shopwx");
        this.$router.replace("/login");
      });
    }
  },
  created() {
    let user = localStorage.getItem("ShopUserInfo")
      ? JSON.parse(localStorage.getItem("ShopUserInfo"))
      : {};
    this.name = user.nickname;
    this.avatar = user.headimgurl;
    document.title = "商家中心";
    this.findUserInfo();
    this.type = JSON.parse(localStorage.getItem("userInfo")).account_type;
  }
};
</script>